<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>引导问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*取消点击效果*/
        div {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        ul, li {
            list-style: none
        }

        .tabClick {
            overflow: hidden;
            border-bottom: 1px solid #f8f8f8;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 41px;
            z-index: 1;
        }

        .tabClick li {
            height: 40px;
            line-height: 40px;
            width: 25%;
            float: left;
            text-align: center;
            color: #24252a;
            font-size: 16px;
        }

        .tabClick li.active {
            color: #00d8d3;
            transition: 0.1s;
            font-weight: bold;
        }

        .tabCon {
            background: #fff;
            position: fixed;
            top: 45px;
            bottom: 0;
            overflow-x: hidden;
            overflow-y: scroll;
            left: 0;
            right: 0;
            z-index: 1;
        }

        .tabBox {
            position: relative;
            background: #fff;
        }

        .tabList {
            background: #fff;
            word-break: break-all;
            width: 100%;
            color: #D3D3D3;
        }

        .lineBorder {
            height: 5px;
            position: fixed;
            top: 41px;
            left: 0;
            right: 0;
            z-index: 2;
        }

        .lineDiv {
            background: #00d8d3;
            height: 3px;
            width: 9px;
            margin-left: 11.3%;
            border-radius: 2px;
            position: relative;
            top: -4px;
        }

        .title {
            font-size: 16px;
            color: #24252a;
            padding: 15px 0 7px;
            font-weight: 500;
        }

        .des {
            font-size: 14px;
            color: #8a8c98;
            line-height: 1.7;
            white-space: pre-wrap;
        }

        .main-color {
            color: #00d8d3;
        }

        .sub-color {
            color: #fbb619;
        }
    </style>
<body>

<!-- 代码部分begin -->
<div class="wrap" id="wrap">
    <ul class="tabClick">
        <li class="active">{if $is_huawei == 0}星盘{else}星图{/if}</li>
        {if $is_huawei == 0}
        <li>幸运卡牌</li>
        {/if}
        <li>骰子</li>
    </ul>
    <div class="lineBorder">
        <div class="lineDiv"><!--移动的div--></div>
    </div>
    <div class="tabCon">
        <div class="tabBox">
            <div class="tabList">
              {if $is_huawei == 0}
                <p class="title">一、什么是星盘问答？星盘根据什么来，占星师怎么看根据星盘进行解答？</p>
                <p class="des">星盘就是天空中各个星体排列组合形成的星图。在你出生那一刻，天空中行星运行的独特位置和结构互相作用，就形成了属于你的个人星盘。占星师可以通过个人星盘中的行星、行星所在的位置，以及行星之间的相互作用，来解读一个人的人生运势起伏，预测事业、财富、爱情、健康等方面的相关事件。</p>
                <p class="title">二、星盘问答适合问什么样的问题？</p>
                <p class="des">星盘问答的提问范围很广泛，<span class="main-color">适合提问</span>的方向有：<br/>{else}
              <p class="title">一、什么是星图问答？星图根据什么来，占星师怎么看根据星图进行解答？</p>
              <p class="des">星图就是天空中各个星体排列组合形成的星图。在你出生那一刻，天空中行星运行的独特位置和结构互相作用，就形成了属于你的个人星图。占星师可以通过个人星图中的行星、行星所在的位置，以及行星之间的相互作用，来解读一个人的人生运势起伏，预测事业、财富、爱情、健康等方面的相关事件。</p>
              <p class="title">二、星图问答适合问什么样的问题？</p>
              <p class="des">星图问答的提问范围很广泛，<span class="main-color">适合提问</span>的方向有：<br/>{/if}
1.预测时间类的，<span class="main-color">如：什么时间求职会更加顺利？</span>
2.分析详细运势的，<span class="main-color">如：2022年我的财运如何？</span>
3.探究个人天赋，寻求建议和指南，<span class="main-color">如：我适合这份职业吗？</span>
但有一些内容是<span class="sub-color">不适合提问</span>的：
1.与生死相关的问题，<span class="sub-color">如：什么时间去世</span>
2.窥探他人隐私的问题，<span class="sub-color">如：他得了什么病</span>
3.有违相关政策的问题，<span class="sub-color">如：我这一胎是男孩还是女孩</span></p>
                <p class="title">三、需要怎么描述自己的问题？</p>
                <p class="des">占星学是精密严谨的数据分析和逻辑推演，因此需要你简单直接的叙述问题，并阐明问题相关的背景信息，占星师对问题的背景信息了解的越全面，越能够有针对性的回答你的问题。</p>
            </div>
            {if $is_huawei == 0}
            <div class="tabList">
                <p class="title">一、幸运卡牌是什么，占卜师根据什么来解答？</p>
                <p class="des">幸运卡牌是一种源自西方的占卜工具。幸运卡牌占卜不是算命，不会给予宿命论的结果，不会告诉你什么是命中注定的。幸运卡牌占卜看的是趋势和建议，如感情的发展、学业事业的发展趋势如何，你需要注意什么，怎样做可以改善状况，让幸运卡牌给予我们启示。幸运卡牌只给建议参考，不替人做选择。
幸运卡牌占卜的流程是：洗牌、切牌，让问卜者抽牌组成相应的牌阵，再由专业的占卜师根据问题以及牌面信息进行卡牌的解读，给出当事人一些建议和回答。</p>
                <p class="title">二、幸运卡牌问答适合什么样的问题？</p>
                <p class="des"><span class="main-color">幸运卡牌只能对短期内（通常是三个月内，也可以稍微延长到半年内）的人、事、物进行预测和分析；</span>幸运卡牌反映的是当下的状况以及走向，时间线越长，外界环境的变化越多，结果的准确度就越容易受到影响。
<span class="main-color">适合问的问题：</span>
1、两个人之间的关系发展
请问我和他的关系近期发展如何？需要注意什么？他对我想法和感觉？怎样做更好？
2、近期的事业发展走向
请问我目前的工作发展如何？有什么是需要注意和改善的吗？
3、人际关系
请问我目前的人际关系应当怎样改善，才会变得更好？
4、近期的恋爱可能性及建议
请问近期有没有恋爱的可能性，怎样做有利于脱单？
<span class="sub-color">不适合问的问题：</span>
1、避免询问具体的时间、数字、分数等：我什么时候可以脱单？考试会考多少分？
2、避免过于情绪化的问题：我为什么总是不及格？他为什么不爱我？为什么我总是中不了奖？
3、避免宿命论的问题：我是不是要单身一辈子了？</p>
                <p class="title">三、需要怎样描述自己的问题？</p>
                <p class="des">幸运卡牌是一事一问，问题能越具体越好。当然，也可以尽量多的阐述你的问题背景，前提是，你的描述相对客观，受主观影响较小。

                </p>
            </div>
            {/if}
            <div class="tabList">
                <p class="title">一、什么是骰子问答，占星师根据什么给出解答？</p>
                <p class="des">占星骰子是把占星的核心理论和骰子相结合而做出的预测工具，并不能给出肯定的结果。它是通过3个骰子（行星、星座、宫位）各自12个不同面，组合出1728种不同的结果。
占星师会通过提问者投出的结果“行星 星座 宫位”进行解答，一般是把星体作为核心，参考它在星座和宫位的具体表现，给出发展趋势、影响以及建议。</p>
                <p class="title">二、骰子问答适合问什么样的问题？</p>
                <p class="des">骰子<span class="main-color">只能问近三个月内</span>，并且是<span class="main-color">一对一的问题</span>。<span class="sub-color">不可以问二选一和关于时间的问题。</span>
适合问的问题：
1.近三个月内的感情运势如何？
2.近三个月内的财运如何？
3.近三个月内这段感情会怎么发展？
4.如果我去了这家公司会怎么样？
5.如果我和ta在一起会怎么样？
不适合问的问题：
1.关于时间的问题：我什么时候能脱单？/我什么时候能发财暴富?
2.关于是否的问题：我会不会一直都找不到对象？/我要不要和ta在一起？
3.关于二选一的问题：我该去这家公司还是哪家公司？</p>
                <p class="title">三、需要怎么描述自己的问题？</p>
                <p class="des">在提问之后，你可以大致描述一下问题的背景。问题：我和ta在一起了会怎么样？背景：ta是我喜欢了很久男生，但我从来没有透漏过我的心意。不过，昨天ta和我表白了，我不知道要不要和ta在一起。
占星师对问题的背景信息了解的越详细，越能够有针对性的回答你的问题。</p>
            </div>
        </div>
    </div>
</div>

<script charset="utf-8">
    let type = parseInt('{$type}')
    window.onload = function () {
        var windowWidth = document.body.clientWidth;
        var wrap = document.getElementById('wrap');
        var tabClick = wrap.querySelectorAll('.tabClick')[0];
        var tabLi = tabClick.getElementsByTagName('li');
        console.log(tabClick, tabLi)

        var tabBox = wrap.querySelectorAll('.tabBox')[0];
        var tabList = tabBox.querySelectorAll('.tabList');

        var lineBorder = wrap.querySelectorAll('.lineBorder')[0];
        var lineDiv = lineBorder.querySelectorAll('.lineDiv')[0];

        var tar = 0;
        var endX = 0;
        var dist = 0;

        tabBox.style.overflow = 'hidden';
        tabBox.style.position = 'relative';
        tabBox.style.width = windowWidth * tabList.length + "px";

        for (var i = 0; i < tabLi.length; i++) {
            tabList[i].style.width = (windowWidth - 32) + "px";
            tabList[i].style.float = 'left';
            tabList[i].style.float = 'left';
            tabList[i].style.padding = '0 16px';
            tabList[i].style.margin = '0 auto';
            tabList[i].style.verticalAlign = 'top';
            tabList[i].style.display = 'table-cell';
        }

        for (var i = 0; i < tabLi.length; i++) {
            tabLi[i].start = i;
            tabLi[i].onclick = function () {
                var star = this.start;
                for (var i = 0; i < tabLi.length; i++) {
                    tabLi[i].className = '';
                }
                tabLi[star].className = 'active';
                // init.lineAnme(lineDiv, windowWidth / tabLi.length * star)
                init.lineAnme(lineDiv, tabLi[star].offsetWidth * star)
                init.translate(tabBox, windowWidth, star);
                endX = -star * windowWidth;
            }
        }

        function OnTab(star) {
            if (star < 0) {
                star = 0;
            } else if (star >= tabLi.length) {
                star = tabLi.length - 1
            }
            for (var i = 0; i < tabLi.length; i++) {
                tabLi[i].className = '';
            }

            tabLi[star].className = 'active';
            init.translate(tabBox, windowWidth, star);
            init.lineAnme(lineDiv, star * windowWidth / 4);
            endX = -star * windowWidth;
        }

        OnTab(type)

        // tabBox.addEventListener('touchstart', chstart, false);
        // tabBox.addEventListener('touchmove', chmove, false);
        // tabBox.addEventListener('touchend', chend, false);

        //按下
        function chstart(ev) {
            ev.preventDefault;
            var touch = ev.touches[0];
            tar = touch.pageX;
            tabBox.style.webkitTransition = 'all 0s ease-in-out';
            tabBox.style.transition = 'all 0s ease-in-out';
        }

        //滑动
        function chmove(ev) {
            // var stars = wrap.querySelector('.active').start;
            // ev.preventDefault;
            // var touch = ev.touches[0];
            // var distance = touch.pageX - tar;
            // dist = distance;
            // init.touchs(tabBox, windowWidth, tar, distance, endX);
            // init.lineAnme(lineDiv, -dist / tabLi.length - endX / 4);
            ev.preventDefault;
            var touch = ev.touches[0];
            dist = touch.pageX - tar;
        }

        //离开
        function chend(ev) {
            var str = tabBox.style.transform;
            var strs = JSON.stringify(str.split(",", 1));
            endX = Number(strs.substr(14, strs.length - 18));

            if (endX > 0) {
                init.back(tabBox, windowWidth, tar, 0, 0, 0.3);
                endX = 0
            } else if (endX < -windowWidth * tabList.length + windowWidth) {
                endX = -windowWidth * tabList.length + windowWidth
                init.back(tabBox, windowWidth, tar, 0, endX, 0.3);
            } else if (dist < -windowWidth / 3) {
                OnTab(tabClick.querySelector('.active').start + 1);
                init.back(tabBox, windowWidth, tar, 0, endX, 0.3);
            } else if (dist > windowWidth / 3) {
                OnTab(tabClick.querySelector('.active').start - 1);
            } else {
                OnTab(tabClick.querySelector('.active').start);
            }
            var stars = wrap.querySelector('.active').start;
            init.lineAnme(lineDiv, stars * windowWidth / 4);
            dist = 0;
        }
    };

    var init = {
        translate: function (obj, windowWidth, star) {
            obj.style.webkitTransform = 'translate3d(' + -star * windowWidth + 'px,0,0)';
            obj.style.transform = 'translate3d(' + -star * windowWidth + ',0,0)px';
            obj.style.webkitTransition = 'all 0.3s ease-in-out';
            obj.style.transition = 'all 0.3s ease-in-out';
        },
        touchs: function (obj, windowWidth, tar, distance, endX) {
            obj.style.webkitTransform = 'translate3d(' + (distance + endX) + 'px,0,0)';
            obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px';
        },
        lineAnme: function (obj, stance) {
            obj.style.webkitTransform = 'translate3d(' + stance + 'px,0,0)';
            obj.style.transform = 'translate3d(' + stance + 'px,0,0)';
            obj.style.webkitTransition = 'all 0.1s ease-in-out';
            obj.style.transition = 'all 0.1s ease-in-out';
        },
        back: function (obj, windowWidth, tar, distance, endX, time) {
            obj.style.webkitTransform = 'translate3d(' + (distance + endX) + 'px,0,0)';
            obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px';
            obj.style.webkitTransition = 'all ' + time + 's ease-in-out';
            obj.style.transition = 'all ' + time + 's ease-in-out';
        },
    }

</script>


{include file="../apps/web/view/public/sensors.html" /}
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d09c76e42b7d952920cd58fc4c715cf0";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<!-- 代码部分end -->
</body>
</html>
